<template>
  <div class="daily-indicators-compare">
    <div class="compare-header">
      <h2>全段指标动态对比</h2>
      <div class="date-selector">
        <el-date-picker
          v-model="date1"
          type="date"
          placeholder="选择日期1"
          style="margin-right: 20px;"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
        />
        <el-date-picker
          v-model="date2"
          type="date"
          placeholder="选择日期2"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
        />
        <el-select 
          v-model="activeSectionId" 
          placeholder="选择年段" 
          style="width: 150px; margin: 0 20px;"
          @change="handleSectionChange"
        >
          <el-option 
            v-for="section in sections" 
            :key="section.id" 
            :label="section.section_name || section.name" 
            :value="section.id.toString()" 
          />
        </el-select>
        <el-button type="primary" @click="compareData">开始对比</el-button>
        
        <div v-if="sections && sections.length === 0" style="padding: 20px; text-align: center; color: #909399;">
          暂无年段数据
        </div>

      </div>
    </div>
    
    <div class="compare-content">
      <div class="compare-panel">
        <div class="panel-header">
          <span>{{ formatDate(date1) }}</span>
        </div>
        <section-indicators-table
          :query-date="date1"
          :section-id="activeSectionId"
          title="全段指标动态"
          :show-export-button="false"
        />
      </div>
      
      <div class="compare-panel">
        <div class="panel-header">
          <span>{{ formatDate(date2) }}</span>
        </div>
        <section-indicators-table
          :query-date="date2"
          :section-id="activeSectionId"
          title="全段指标动态"
          :show-export-button="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
import SectionIndicatorsTable from "@/components/dailyFeedback/SectionIndicatorsTable.vue";
import api from "@/utils/api.js";

export default {
  name: "DailyIndicatorsCompare",
  components: {
    SectionIndicatorsTable
  },
  data() {
      return {
        date1: this.formatDate(new Date()),
        date2: this.formatDate(new Date(Date.now() - 24 * 60 * 60 * 1000)), // 默认昨天
        activeSectionId: "1", // 默认第一个年段
        sections: []
      };
    },
  mounted() {
    this.loadSections();
  },
  methods: {
    // 加载年段列表
    loadSections() {
      try {
        console.log('开始加载年段列表...');
        this.$fetch(api.admin_section_index).then(res => {
          console.log('年段列表API响应:', res);
          if (res && res.code === 0 && res.list.data && res.list.data.length > 0) {
            this.sections = res.list.data;
            console.log('年段数据:', this.sections);
            // 默认选择第一个年段
            if (this.sections.length > 0) {
              this.activeSectionId = this.sections[0].id.toString();
              console.log('默认选择年段:', this.activeSectionId);
            }
          } else {
            console.warn('未获取到年段数据或数据格式不正确');
            this.$message.warning('未获取到年段数据');
          }
        }).catch(err => {
          console.error('获取年段列表失败:', err);
          this.$message.error('获取年段列表失败，请稍后重试');
        });
      } catch (error) {
        console.error('加载年段发生错误:', error);
        this.$message.error('加载年段数据出错');
      }
    },
    
    // 处理日期变化
    handleDateChange() {
      // 日期变化时可以在这里添加验证逻辑
    },
    
    // 处理年段切换
    handleSectionChange(value) {
      // 确保activeSectionId是字符串类型
      this.activeSectionId = String(value);
      console.log('切换到年段:', this.activeSectionId);
      // 年段切换时强制更新组件，重新加载数据
      this.$forceUpdate();
    },
    
    // 开始对比
    compareData() {
      if (!this.date1 || !this.date2) {
        this.$message.warning('请选择两个对比日期');
        return;
      }
      console.log('开始对比:', this.date1, 'vs', this.date2, '年段:', this.activeSectionId);
      // 重新加载两个表格的数据
      this.$forceUpdate();
    },
    
    // 格式化日期为YYYY-MM-DD
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped>
.daily-indicators-compare {
  padding: 20px;
}

.compare-header {
  margin-bottom: 20px;
}

.compare-header h2 {
  margin-bottom: 15px;
  color: #303133;
}

.date-selector {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px 0;
}

/* 年段选择下拉框样式 */
.el-select {
  font-size: 14px;
}

.compare-content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.compare-panel {
  flex: 1;
  min-width: 500px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  background-color: #ffffff;
}

.panel-header {
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  color: #606266;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .compare-content {
    flex-direction: column;
  }
  
  .compare-panel {
    min-width: auto;
  }
}
</style>